<template>
    <div class="login-container flx-center">
        <div class="login-box">
            <SwitchDark class="switch-dark" />
            <LocaleDropdown class="locale-dropdown" />
            <div class="login-left">
                <h1>{{ $t("description.appTitle") }}</h1>
                <div class="desc">
                    {{ $t("description.appIntroduce") }}
                </div>
                <img src="@/assets/svgs/login-left.svg" alt="" />
            </div>
            <div class="login-form">
                <div class="login-logo">
                    <img class="login-icon" src="@/assets/svgs/logo-vue.svg" alt="" />
                    <h2 class="logo-text">{{ $t("common.login") }}</h2>
                </div>
                <LoginForm />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="LoginView">
import LoginForm from "./modules/LoginForm.vue";
</script>

<style scoped lang="less">
.login-container {
    height: 100%;
    min-height: 550px;
    background-size: 100% 100%;
    background-size: cover;

    .login-box {
        position: relative;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 96%;
        height: 96%;
        padding: 0 90px;
        border-radius: 10px;

        // background-color: rgba(0, 0, 0, 0.0);
        .switch-dark {
            position: absolute;
            top: 18px;
            right: 150px;
        }

        .locale-dropdown {
            position: absolute;
            top: 18px;
            right: 30px;
        }

        .login-left {
            width: 700px;
            margin: 0 0 0 0;
            // background-color: red;

            .desc {
                line-height: 32px;
                padding: 18px;
            }

            h1 {
                color: var(--el-color-primary);
            }

            img {
                width: 80%;
                height: 80%;
            }
        }

        .login-form {
            width: 390px;
            padding: 50px 50px 50px 50px;
            // background-color: darkblue;
            border-radius: 15px;
            // box-shadow 属性
            // h-shadow	必需的。水平阴影的位置。允许负值
            // v-shadow 必需的。垂直阴影的位置。允许负值
            // blur 可选。模糊距离
            // color 可选。阴影的颜色。
            box-shadow: 0px 0px 16px gray;

            .login-logo {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 45px;

                .login-icon {
                    width: 60px;
                    height: 39px;
                }

                .logo-text {
                    margin: 0;
                    padding: 0 0 0 26px;
                    font-weight: bold;
                    white-space: nowrap;
                }
            }

            .el-form-item {
                margin-bottom: 30px;
            }

            .login-btn {
                display: flex;
                justify-content: space-between;
                width: 100%;
                margin-top: 40px;
                white-space: nowrap;

                .el-button {
                    width: 185px;
                }
            }
        }
    }
}

@media screen and (max-width: 1250px) {
    .login-left {
        display: none;
    }
}

@media screen and (max-width: 600px) {
    .login-form {
        width: 97% !important;
    }
}
</style>
